<template>
  <div class="body-container">
    <div class="ins-container">
      <!-- 行内表单，用来查询 -->
      <el-form :inline="true">
        <el-form-item label="仪器数据标识：">
          <el-input v-model="text1" size="small" placeholder="请输入仪器标识"></el-input>
        </el-form-item>
        <el-form-item label="仪器标签：">
          <el-input v-model="text2" size="small" placeholder="请输入仪器标签"></el-input>
        </el-form-item>
        <el-button type="primary" size="small" class="btn">查询</el-button>
        <el-button type="success" size="small" @click="dialogVisible = true">添加</el-button>
      </el-form>

      <!-- 弹框 -->
      <el-dialog title="添加" :visible.sync="dialogVisible" top="220px" append-to-body>
        <!-- 内容区域 -->
        <el-form :rules="rules" label-width="120px">
          <el-form-item label="仪器数据标识" prop="name">
            <el-input v-model="name" @change="handleChangeSignature"></el-input>
          </el-form-item>
          <el-form-item label="仪器标签" prop="region">
            <el-input v-model="region" @change="handleChangeName"></el-input>
          </el-form-item>
        </el-form>

        <!-- 弹框底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="addItemToList">确 定</el-button>
          <el-button type="danger" size="small" @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

      <!-- 仪器显示信息面板 -->
      <el-table :data="list" border :header-cell-style="{ color: '#909399' }" :cell-style="{ color: 'black' }">
        <el-table-column prop="signature" label="仪器数据标识" width="180"> </el-table-column>
        <el-table-column prop="name" label="仪器标签" width="180"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" class="btn1">编辑</el-button>
            <el-button type="danger" size="small" @click="removeItemById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'SelectInstrument',
  data() {
    return {
      text1: '',
      text2: '',
      dialogVisible: false,
      name: '',
      region: '',
      rules: {
        name: [
          { required: true, message: '请输入仪器标识', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        region: [{ required: true, message: '请输入仪器标签', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(['list', 'inputSignature', 'inputName'])
  },

  methods: {
    // 监听文本框内容变化
    handleChangeSignature(e) {
      console.log(e)
      this.$store.commit('setInputSignature', e)
    },
    handleChangeName(e) {
      console.log(e)
      this.$store.commit('setInputName', e)
    },
    addItemToList() {
      // .trim 去除文本框两端的空格
      if (this.inputSignature.trim().length <= 0 || this.inputName.trim().length <= 0) {
        return this.$message.warning('文本框内容不能为空！')
      }
      this.$store.commit('addItem')
    },
    // 根据Id删除对应的任务事项
    removeItemById(id) {
      // console.log(id)
      this.$store.commit('removeItem', id)
    }
  }
}
</script>

<style scoped>
.ins-container {
  width: 1200px;
  margin: 10px auto 10px;
  /* border-top: solid 1px #e6e6e6; */
}

.btn {
  margin: 6px 10px;
}
.btn1 {
  margin-left: 10px;
  margin-right: 15px;
}

.el-table,
.el-form-item {
  font-size: 14px;
}
</style>
